import { defineStore } from "pinia";
import { GET_THEME, SET_THEME } from "@/utils/localStorage";
import { useCssVar } from '@vueuse/core';

const useSettingStore = defineStore("setting", () => {
     let fold = ref(false)
     let refresh = ref(false)
     let theme = ref(GET_THEME() || "#409EFF")

     const updateFold = () => {
          fold.value = !fold.value;
     }

     const getFold = () => {
          return fold.value;
     }

     const updateRefresh = () => {
          refresh.value = !refresh.value;
     }
     const getRefresh = () => {
          return refresh.value;
     }

     const updateTheme = (value: string | undefined) => {
          if (value) {
               theme.value = value;
               SET_THEME(value);
          }
          useCssVar('--el-color-primary', document.documentElement).value = theme.value;
     }

     const getTheme = () => {
          return theme.value;
     }

     return {
          fold,
          refresh,
          theme,
          getFold,
          getRefresh,
          updateFold,
          updateRefresh,
          updateTheme,
          getTheme
     }
});

export default useSettingStore;